<!--全国状态展示-->
<template>
  <div class="container">
    <normal-layout pageIndex="1-1" style="width: 15%">
      <div class="bodyDiv">
        <!--中国地图-->
        <chinese-map style="width: 66%; height: 895px; margin-left: 10px; margin-bottom:70px; margin-top: 10px"></chinese-map>
        <!--详细数据-->
        <el-card style="height: 895px; width: 32%; margin-top: 10px; margin-left: 10px;margin-bottom:10px; background-color:#ffffff">
          <el-tabs v-model="tabData" @tab-click="handleClick">
            <el-tab-pane label="故障设备" name="guzhang">
              <div style="white-space: nowrap; display: flex">
                <el-select placeholder="设备种类" style="margin: 5px"></el-select>
                <el-select placeholder="设备类型" style="margin: 5px"></el-select>
              </div>
              <div style="white-space: nowrap;display: flex">
                <el-select placeholder="设备编号" style="margin: 5px"></el-select>
                <el-select placeholder="所在区域" style="margin: 5px"></el-select>
              </div>

              <el-table :data="tableData" stripe style="height: 280px; overflow-y: auto">
                <el-table-column label="设备种类" prop="class">

                </el-table-column>
                <el-table-column label="设备类型" prop="type">

                </el-table-column>
                <el-table-column label="设备编号" prop="id">

                </el-table-column>
                <el-table-column label="所在区域" prop="factory">

                </el-table-column>
              </el-table>
              <el-pagination></el-pagination>

              <h3 style="margin-top: 40px">未处理风机故障信息</h3>
              <el-table :data="tableData" stripe style="height: 280px; overflow-y: auto">
                <el-table-column label="设备种类" prop="class">

                </el-table-column>
                <el-table-column label="设备类型" prop="type">

                </el-table-column>
                <el-table-column label="设备编号" prop="id">

                </el-table-column>
                <el-table-column label="所在区域" prop="factory">

                </el-table-column>
                <el-table-column label="位置" prop="pos">

                </el-table-column>
                <el-table-column label="等级" prop="level">

                </el-table-column>
              </el-table>
              <el-pagination></el-pagination>

            </el-tab-pane>
            <el-tab-pane label="在线车辆" name="zaixian">
              <h3 style="margin-top: 30px">在线设备信息</h3>
              <el-table :data="tableData" stripe style="height: 350px">
                <el-table-column label="设备种类" prop="class">

                </el-table-column>
                <el-table-column label="设备类型" prop="type">

                </el-table-column>
                <el-table-column label="设备编号" prop="id">

                </el-table-column>
                <el-table-column label="所在区域" prop="factory">

                </el-table-column>
              </el-table>
              <el-pagination></el-pagination>
              <h3 style="margin-top: 30px">在线机型统计</h3>
              <annual-pie style="margin-top: 10px;width: 100%;height: 300px" v-if="tabData==='zaixian'"></annual-pie>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </normal-layout>
  </div>
</template>

<script>
    import SideBars from "../../components/base/sideBars";
    import ChineseMap from "../../components/Charts/ChineseMap";
    import AnnualPie from "../../components/Charts/AnnualPie";
    export default {
      name: "NationWideStatus",
      components: {AnnualPie, ChineseMap, SideBars},
      methods:{
        handleClick(){
          console.log(this.tabData)
        }
      },
      data(){
        return{
          tabData:'guzhang',
          tabData0:'d',
          tableData: [{
            class: '双馈',
            type: '5mw空水冷双馈风力发电机',
            id:'10120001',
            factory:'东北区域',
            pos:'转子'
          }, {
            class: '笼型',
            type: '鼠笼异步风力发电机',
            id:'32121001',
            factory:'北方区域',
            pos:'转子'
          }, {
            class: '永磁',
            type: '永磁直驱风力发电机',
            id:'22102001',
            factory:'西北区域',
            pos:'转子'
          },{
            class: '永磁',
            type: '7.6MW 半直驱永磁风力发电机',
            id:'22102002',
            factory:'西北区域',
            pos:'转子'
          }]
        }
      }
    }
</script>

<style scoped>
  .container {
    width: 100%;
    display: flex;
  }
  .bodyDiv{
    width: 100%;
    display: flex;
/*    background-color: #f0f0f0;*/
  }

</style>
